<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">0.01</text>
		</view>

		<view class="pay-type-list">

			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<view class="type-item b-b" @click="changePayType(2)">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
					<text>推荐使用支付宝支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 2' />
					</radio>
				</label>
			</view>
		</view>
		
		<text class="mix-btn" @click="PaySubmit">确认支付</text>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				payType: 1
			};
		},
		computed: {
		
		},
		onLoad(options) {
			
		},

		methods: {
			changePayType(type) {
				this.payType = type;
			},
			PaySubmit() {
				if(this.payType == 1){
					this.WxPay();
				}else if(this.payType == 2){
					this.AliPay();
				}
			},
			//微信支付
			WxPay: async function(e) {
				//首先是向后台发起请求，生成订单或者读取已有订单，然后由后端发起统一支付，向微信预生成支付订单，然后再拉起微信APP支付并返回。
				this.$http.request({
					url: 'https://you.com/WxPay',
					method: 'get',
					params: {
						uid: this.uid,//自己定义参数
						orderid:this.orderid//自己定义参数
					},
				}).then(res=>{
					uni.requestPayment({
					    provider: 'wxpay',
					    orderInfo: res.data, //支付宝订单数据
					    success: function (res) {
					        if (res.errMsg == 'requestPayment:ok') {
					            uni.redirectTo({//支付成功转到支付成功提示页面  
					               url: '/pages/paySuccess'
					            })  
					        }else{  
					            console.log('fail:' + JSON.stringify(res));
					        } 
					    },
					    fail: function (err) {
					       
					    }
					});
				}).catch(err=>{
					console.log(res);
				})
				
			},
			//支付宝支付
			AliPay: async function(e) {
				//首先是向后台发起请求，生成订单或者读取已有订单，然后由后端发起统一支付，向支付宝预生成支付订单，然后再拉起支付宝APP支付并返回。
				this.$http.request({
					url: 'https://you.com/AliPay',
					method: 'get',
					params: {
						uid: this.uid,//自己定义参数
						orderid:this.orderid//自己定义参数
					},
				}).then(res=>{
					uni.requestPayment({
					    provider: 'alipay',
					    orderInfo: res.data.data, //支付宝订单数据
					    success: function (res) {
					        if (res.errMsg == 'requestPayment:ok') {
					            uni.redirectTo({//支付成功转到支付成功提示页面  
					               url: '/pages/paySuccess'
					            })  
					        }else{  
					           console.log('fail:' + JSON.stringify(res));
					        } 
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				}).catch(err=>{
					console.log(res);
				})
				
			}
		}
	}
</script>

<style lang='scss'>
	

</style>
